<script setup lang="ts">

</script>


<template>
  <nav class="moon-top-nav">
    <!-- logo模块 -->
    <div class="m-left">
      <i class="iconfont icon-yueqiu"></i>
      <div class="logo">月球博客</div>
    </div>
    <div class="m-right">
      <!-- 每一项 -->
      <div class="item">
        <div class="text"><i class="iconfont icon-moon"></i>首页</div>
        <!-- 下拉菜单 -->
        <ul class="moon-select">
          <li @click="$router.push('/home')">月球首页</li>
          <li @click="$router.push('/search')">月球搜索</li>
          <!-- <li @click="$router.push('/garden')">月球博客</li> -->
          <li @click="$router.push('/edit')">添加文档</li>
        </ul>
      </div>
      <!-- 每一项 -->
      <div class="item">
        <div class="text"><i class="iconfont icon-huowudui"></i>百宝箱</div>
        <!-- 下拉菜单 -->
        <ul class="moon-select">
          <li @click="$router.push('/column')">月球栏</li>
          <li>组件库</li>
          <li>特效库</li>
          <!-- <li>待添加</li> -->
        </ul>
      </div>
      <!-- 每一项 -->
      <div class="item" @click="$router.push('/timeline')">
        <div class="text"><i class="iconfont icon-shijian"></i>时间线</div>
      </div>
      <!-- 每一项 -->
      <div class="item" @click="$router.push('photo')">
        <div class="text"><i class="iconfont icon-xiangji"></i>相册</div>
      </div>
      <!-- 每一项 -->
      <div class="item" @click="$router.push('leave')">
        <div class="text"><i class="iconfont icon-yun"></i>留言</div>
      </div>
      <!-- 每一项 -->
      <div class="item user">
        <div class="userimg">
        </div>
        <div class="text" @click="$router.push('/login')"><i></i>登录</div>
      </div>
    </div>
  </nav>
</template>


<style lang="less" scoped>
.moon-top-nav {
  position: fixed;
  top: 0px;
  z-index: 1111;
  width: 100%;
  height: 60px;
  transition: all .5s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 60px;
  color: #fff;
  // font-weight: 600;
  font-size: 18px;

  // logo模块
  .m-left {
    width: 20%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      font-size: 50px;
      vertical-align: middle;
    }

    .logo {
      width: 32%;
      height: 60px;
      text-align: center;
    }
  }

  // 下拉模块
  .m-right {
    width: 50%;
    height: 60px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    // 每一项
    .item {
      flex-shrink: 0;
      width: 120px;
      height: 60px;
      text-align: center;

      // 图标
      i {
        display: inline-block;
        margin-right: 10px;
        font-size: 20px;
        vertical-align: middle;
      }

      // 文本
      .text {
        width: 120px;
        height: 60px;
      }

      // 下拉列表
      .moon-select {
        flex-shrink: 0;
        overflow: hidden;
        width: 120px;
        height: 0px;
        text-align: center;
        transition: all .1s;

        li {
          padding: 10px;
          line-height: 20px;
          background: rgba(0, 0, 0, 0.5);

          &:hover {
            background: #ffffff80;
          }
        }
      }

      &:hover .moon-select {
        height: 160px;
      }
    }

    // 用户
    .user {
      position: relative;
      display: flex;
      height: 60px;
      justify-content: center;

      .userimg {
        position: absolute;
        top: 21px;
        left: 5px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        vertical-align: middle;
        background: rgba(0, 0, 0, 0.5);
      }
    }
  }

  &:hover {
    background: rgba(0, 0, 0, .5);
  }
}
</style>